import { cn } from "@/lib/utils";

interface SidebarProps {
  menuItems: {
    id: number;
    name: string;
    icon: string;
  }[];
  activeMenu: number;
  handleMenuClick: (id: number) => void;
}

export default function Sidebar({
  menuItems,
  activeMenu,
  handleMenuClick
}: SidebarProps) {
  return (
    <div className="w-60 border-r border-[#9575CD] bg-white">
      <nav className="p-4">
        <ul className="space-y-2">
          {menuItems.map(item => (
            <li key={item.id}>
              <button
                onClick={() => handleMenuClick(item.id)}
                className={cn(
                  "flex w-full items-center space-x-3 rounded-md px-4 py-3 text-left",
                  activeMenu === item.id
                    ? "bg-[#673AB7] text-white" 
                    : "text-gray-700 hover:bg-[#9575CD] hover:text-white"
                )}
              >
                <i className={cn(item.icon, "text-sm")}></i>
                <span>{item.name}</span>
              </button>
            </li>
          ))}
        </ul>
      </nav>
    </div>
  );
}
